<template>
  <div class="settlement-report-list table-gl-w">
    <div class="search-w">
      <a-month-picker v-model="month" :allow-clear="false" value-format="YYYY-MM" style="width: 240px" @change="getTableList" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="getTableList">
        <template #tableBody>
          <a-table class="table-singe-line show-border-table" :row-class="rowClass" :loading="tableLoading" :data="tableList" :virtual-list-props="{ height: '100%' }" size="mini" :pagination="false">
            <template #columns>
              <a-table-column data-index="sort" title="序号" :width="45" fixed="left">
                <template #cell="{ rowIndex }">
                  <p>{{ rowIndex + 1 }}</p>
                </template>
              </a-table-column>
              <a-table-column title="月份" :width="120" data-index="month" fixed="left" />
              <a-table-column title="店铺" :width="120" data-index="shop_name" />
              <a-table-column title="是否匹配" :width="80" data-index="matched" />
              <a-table-column title="结算总额" :width="60" data-index="total_amount" align="right" />
              <a-table-column title="汇总总额" :width="120" data-index="total_agg_amount" :sortable="sortable" align="right" />
              <a-table-column title="差额" :width="120" data-index="diff_amount" :sortable="sortable" align="right" />
              <a-table-column title="提现次数" :width="120" data-index="total_count" :sortable="sortable" align="right" />
              <a-table-column title="完成次数" :width="120" data-index="checked_count" :sortable="sortable" align="right" />
            </template>
          </a-table>
        </template>
      </TableWrap>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue'
  import { SettlementTotalAmountCheckStatus } from '@/api/finance/summaryReport'
  import useBaseDataStore from '@/store/modules/base-data'
  import dayjs from 'dayjs'

  onMounted(() => {
    getShopList()
    getTableList()
  })

  const month = ref(dayjs().format('YYYY-MM'))
  const tableLoading = ref(false)
  const tableList = ref<Array<any>>([])
  const useBaseData = useBaseDataStore()
  const shopList = ref<Array<any>>([])

  const sortable = reactive({
    sortDirections: ['descend', 'ascend'],
  }) as any

  // 获取店铺
  async function getShopList() {
    await useBaseData.getSellersList()
    shopList.value = useBaseData.sellersList
  }
  // 获取商品列表
  async function getTableList() {
    tableLoading.value = true
    const res: any = await SettlementTotalAmountCheckStatus({ param: { month: month.value } })
    tableLoading.value = false
    let list = res?.data?.rs?.result || []
    let map: any = {}
    shopList.value.forEach((item: any) => {
      if (item.sellerId) {
        map[item.sellerId] = true
      }
    })
    list = list.filter((item: any) => map[item.seller_id])
    list.sort((a: any, b: any) => (a.matched > b.matched ? -1 : 1))
    tableList.value = list
  }
  function rowClass(option: any) {
    return option?.raw?.matched === '匹配正确' ? '' : 'error'
  }
</script>

<style lang="less" scoped>
  .settlement-report-list {
    height: calc(100vh - @menuAndTabHeight);
    .search-w {
      padding-bottom: 10px;
    }
  }
  :deep(.arco-table .error .arco-table-cell) {
    color: red;
  }
</style>
